Tree Shaking

本当に利用されているコードだけを残すことで、bundle sizeを小さくする

その後、その周辺のbundlerには機能として含まれてるものが多い

bundler固有の話？

tree shkingはその中でも特にimpoet/export関連飲みの話ということ？

どの単位で消す？

関数レベル？

モジュールレベル？

importした上で、その関数を使っていない場合はそのimportも無視される？

JS固有の話？

webpack固有の話？

esm固有の話？

副作用は誰がどのようにして決定するのか

設定ファイルに書くにしても、開発者が手動でやるの怖すぎないか

副作用

ES6 classの副作用

webpack を利用している場合

4 未満を利用中の場合は、 4 にアップグレードする

UglifyJS を使う場合、 pure_funcs を指定する

package.json で sideEffects を指定することを検討する

webpack、 Rollup 共通

UglifyJS を使う場合、 compress オプションに passes=3 を指定するといいことがあるかも

Babel や TypeScript のようなトランスパイラで、 ES Modules を CommonJS に変換しないよう注意する

TypeScript を使っている場合は、以下のいずれかの方法で ES6 class を tree shaking できるようにする

UglifyJS を使う場合、 /** @class */ を /*@__PURE__*/ に置換する

tree shaking概要

ざっくりした仕組みの解説

なぜrequireでは無理なのか、など

具体例

lodashを用いて実際どれぐらいのバンドルサイズの差になるのかの例

ESM で Import されないモジュールを削除する機能

rollup なら単体でできる

ライブラリの中から、importしていない関数たちを削除する漢字科

ESM を使うことにより、未使用のモジュールを検知しバンドル時に分解する

Tree Shakingではコードが消されない

案外、Tree Shakingという名前は昔からあり、1990年代のLISPにさかのぼります。

詳しそう

tree shaking対応のlibraryを作る